export default {
    mounted(el) {
        console.log(el);

        function getStyle(dom, props) {
            return parseInt(window.getComputedStyle(dom, null)[props])
        }
        const oImgWrap = el,
            oMagWrap = oImgWrap.querySelector('.mag-wrap'),
            oMagImg = oImgWrap.querySelector('.mag-img'),
            // 正常图片 宽高   
            imgWidth = getStyle(oImgWrap, 'width'),
            imgHeight = getStyle(oImgWrap, 'height'),
            // 放大区域 宽高   
            magWidth = getStyle(oMagWrap, 'width'),
            magHeight = getStyle(oMagWrap, 'height'),
            // 正常图片 坐标
            imgX = oImgWrap.offsetLeft,
            imgY = oImgWrap.offsetTop

        console.log(imgWidth, imgHeight);
        console.log(magWidth, magHeight);
        console.log(imgX, imgY);

        function bindEvent() {
            oImgWrap.addEventListener('mouseover', function(e) {
                oMagWrap.className += ' show'
                handleMouseover(e)
            }, false)
            oImgWrap.addEventListener('mouseout', handleMouseout, false)
        }

        function handleMouseover(e) {
            const { x, y, mouseX, mouseY } = getXY(e)
            showMsg(x, y, mouseX, mouseY)
        }

        function handleMouseout() {
            oMagWrap.className = 'mag-wrap'
        }

        function showMsg(x, y, mouseX, mouseY) {
            oMagWrap.style.left = x + 'px'
            oMagWrap.style.top = y + 'px'
            oMagImg.style.left = -x + 'px'
            oMagImg.style.top = -y + 'px'

            if (mouseX < 0 || mouseY < 0 || mouseX > imgWidth || mouseY > imgHeight) {
                oMagWrap.className = 'mag-wrap'
                document.removeEventListener('mousemove',handleMouseover,false)
            }
        }

        function getXY(e) {
            return {
                x: e.pageX - imgX - magWidth / 2,
                y: e.pageY - imgY - magHeight / 2,
                mouseX: e.pageX - imgX,
                mouseY: e.pageY - imgY
            }
        }
        bindEvent()
    }
}